<template>
	<div class="q-parent">
		<div class="q-parent-left">
			<div class="l-change-btn">
				<div class="l-change-title">
					<el-select v-model="curChangeType" placeholder="Select">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							<div class="opt-content">
								<span>{{ item.label }}</span>
							</div>
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="l-change-btn">
				<el-button type="primary" @click="addNewChat" class="cus-btn" :icon="Plus">新增话题</el-button>
			</div>
			<div class="l-change-btn">
				<div class="l-change-line"></div>
			</div>
			<div class="l-change-btn">
				<div class="l-list">
					<div class="l-list-title">
						<div class="l-l-t-left">
							<el-icon>
								<ChatDotRound />
							</el-icon>
							<span>询问记录</span>
						</div>
						<el-icon>
							<ArrowDown v-if="!blnRight" @click="changeRight" />
							<ArrowRight v-else @click="changeRight" />
						</el-icon>
					</div>
					<div class="l-list-content" v-if="!blnRight">
						<div :title="`${item.name},${item.id}`"
							:class="[index == curChanged ? 'l-list-item-focus' : 'l-list-item']"
							@click="pushUrl(item.id, index)" v-for="(item, index) in list_history" :key="index">
							{{ item.name }}
						</div>
					</div>
				</div>
			</div>
			<div class="l-change-btn">
				<div class="l-change-line"></div>
			</div>
		</div>
		<div class="q-parent-right">
			<router-view :key="$route.fullPath"></router-view>
		</div>
	</div>
</template>
<script lang="ts" name="work-question" setup>
import { Plus } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import { router, service } from '/@/cool';
const curChangeType = ref(2);
const curChanged = ref(0)
let strFirstId = ref('');
const contentUrl = '/question/content'
import { useDict } from "/$/dict";
const { dict } = useDict();

interface Options {
	value: string,
	label: string
}
const options: Array<Options> = [];
dict.get("dify").value.forEach(item => {
	let obj: Options = {
		value: item.id,
		label: item.label
	}
	options.push(obj)
})
options.unshift({
	value: "-1",
	label: "选择智能体"
})

interface Link {
	id: string,
	name: string
}
let list_history: Array<Link> = reactive([])
let blnRight = ref(false);
function changeRight() {
	blnRight.value = !blnRight.value;
}
function pushUrl(id: string, index: number) {
	curChanged.value = index;
	router.push({ path: contentUrl, query: { id: id, type: curChangeType.value } })

}
function addNewChat() {
	router.push({ path: contentUrl, query: { id: "", type: curChangeType.value } })
}
async function getUserHistory() {
	await service.base.open.conversations({
		type: curChangeType.value,
		user: "suguoyuan",
		last_id: '',
		pinned: false,
		limit: 20
	}).then(data => {
		let res = JSON.parse(data).data;
		res.forEach((item: any, index: number) => {
			if (item.name) {
				// 如果是第一条记录
				if (index == 0) strFirstId.value = item.id;
				let obj: Link = {
					id: item.id,
					name: item.name
				}
				list_history.push(obj)
			}
		})
		// 加载第一条id对应问答数据
		router.push({ path: contentUrl, query: { id: strFirstId.value, type: curChangeType.value } })
	})
}
onMounted(() => {
	getUserHistory();
})
</script>
<style lang="scss">
.q-parent {
	width: 100%;
	display: flex;
	justify-content: space-between;
	height: 100%;

	.q-parent-left {
		width: 260px;
		font-size: 14px;
		background-color: #eee;
		flex-shrink: 0;

		.l-change-title {
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-between;
			margin: 10px 10px 30px 10px;
		}

		.l-change-btn {
			display: flex;
			justify-content: center;
			width: 100%;

			.cus-btn {
				width: 92%;
			}

			.l-list {
				width: 92%;

				.l-list-title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.l-l-t-left {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 8px;

						span {
							margin-left: 6px;
							font-size: 15px
						}
					}
				}

				::-webkit-scrollbar {
					display: none;
				}

				.l-list-content {
					list-style-type: none;
					padding: 0;
					margin: 0;
					overflow-y: auto;
					height: 550px;

					.l-list-item {
						padding: 8px 0 8px 15px;
						margin: 3px 0 3px 5px;
						font-size: 14px;
						color: #717171;
						cursor: pointer;
						width: 200px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.l-list-item-focus {
						background-color: #fff;
						padding: 8px 0 8px 15px;
						margin: 3px 0 3px 5px;
						font-size: 14px;
						color: #717171;
						cursor: pointer;
						overflow: hidden;
						color: #000;
						width: 210px;
						border-radius: 12px;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

		}

		.l-change-line {
			border-bottom: solid 1px #ccc;
			width: 92%;
			margin: 30px 0;
			text-align: center
		}
	}

	.q-parent-right {
		margin-left: 10px;
		width: calc(100% - 270px);
		overflow: hidden;
	}


}

.opt-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
